<template>
  <div class="history">
     <el-col :span="8" v-for="list in Lists" :key="list.id">
        <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
          <div style="padding: 6px">
            <img :src="list.video.thumbnail" alt="">
            <span >{{list.video.name}}  {{list.timetotal}} {{list.times}}</span>
          </div>
        </el-card>
      </el-col>
  </div>
</template>

<script>
import historyApi from "@/api/history"
import videoApi from "@/api/video"
export default {
    data(){
        return{
            Lists:[
                {id:"1" ,
                video:{id:1,name:"ok",thumbnail:"url"},
                timetotal:"1:45",times:"2019-12-21"}
            ],
        }
    },
    created(){
        this.fetchData();
    },
    methods:{
        fetchData() {
            historyApi.list().then(response => {
            const res = response.data;
            this.Lists = res.data;
         });
        }
    }
}
</script>

<style scoped>
.history {
  position: absolute;
  width: 80%;
  /* background: url("../../../assets/manager.jpg") no-repeat center center; */
  right: 10%;
  bottom: 0px;
  overflow-y: auto;
  left: 10%;
  top: 60px;
}
img{
    width: 100%;
    display: block;
}
.el-card{
    width:300px;
}
</style>